{extend name="../../../view/public/base" /}
{block name="css"}
<style>

    body {
        background-color: #F2F2F2;
    }
    .layui-form-pane .layui-form-label {
        font-size: 10px;
    }
    .layui-elip, .layui-form-checkbox span, .layui-form-pane .layui-form-label {
        text-overflow:clip;
        white-space: nowrap;
    }


    .overflow-hidden{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
{/block}
{block name="body"}
<form class="layui-form layui-form-pane" id="form">




    <input type="hidden" id="id" name="id" value="{$entity.id? $entity.id : 0}"/>
    <blockquote class="layui-elem-quote"><h3><i class="layui-icon">&#xe611;</i>&nbsp&nbsp&nbsp
        <span style="color: red;"> 组合数据展示路由及使用方法请查看开发文档</span>

    </h3></blockquote>



    <style type="text/css">
        .select-test{position: absolute;max-height: 500px;height: 350px;overflow: auto;width: 100%;z-index: 123;display: none;border:1px solid silver;top: 42px;}
        .layui-show{display: block!important;}
    </style>
    <div class="layui-form layui-form-panel">

        <div class="layui-form-item">
            <label class="layui-form-label"><span style = "color:red;">*</span>数据组名称：</label>
            <div class="layui-input-block" >
                <input  type="text" name="name" lay-verify="name"
                        autocomplete="off" placeholder="请输入数据组名称" class="layui-input"
                        value="{$entity.name? $entity.name : null}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style = "color:red;">*</span>数据组字段：</label>
            <div class="layui-input-block" >
                <input  type="text" name="config_name" lay-verify="config_name"
                        autocomplete="off" placeholder="请输入数据组字段" class="layui-input"
                        onkeyup="this.value=this.value.replace(/[^\w_]/g,'');"
                        value="{$entity.config_name? $entity.config_name : null}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style = "color:red;">*</span>数据组说明：</label>
            <div class="layui-input-block" >
                <input  type="text" name="desc" lay-verify="desc"
                        autocomplete="off" placeholder="请输入数据组说明" class="layui-input"
                        value="{$entity.desc? $entity.desc : null}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><span style = "color:red;">*</span>配置权限：</label>
            <div class="layui-input-block">
                {if !empty($entity.scopes)}
                <input type="radio" name="scopes"  value="common"  title="平台"  lay-filter="scopes" disabled {$entity.scopes=='common' ? 'checked':'' }  >
                <!--<input type="radio" name="scopes"  value="admin"  title="总后台"  {$entity.scopes=='admin' ?  'checked':'' }>-->
                <input type="radio" name="scopes"  value="member"  title="租户"  lay-filter="scopes" disabled {$entity.scopes=='member' ?  'checked':'' }>
                {else/}
                <input type="radio" name="scopes"  value="common"  title="平台"  lay-filter="scopes" checked >
                <!--<input type="radio" name="scopes"  value="admin"  title="总后台">-->
                <input type="radio" name="scopes"  value="member"  title="租户"  lay-filter="scopes" >
                {/if}
            </div>
        </div>

        <div class="layui-form-item" id="miniapp" {if empty($entity.scopes)||$entity.scopes!='member' } style="display: none" {/if}>
        <label class="layui-form-label">应用(选填)</label>
        <div class="layui-input-block">

            <select name="dir" id="miniapp_name" lay-filter="miniapp_name" >
                <option value="">默认非应用数据</option>
                {if !empty($entity.dir)}
                {volist name="miniapp" id="vo" key="k"}
                <option value="{$vo.dir}" {eq name="vo.dir" value="$entity.dir"} selected=""  {/eq}>{$vo.title}</option>
                {/volist}
                {else/}
                {volist name="miniapp" id="vo"  key="k"}
                <option value="{$vo.dir}" >{$vo.title}</option>
                {/volist}
                {/if}
            </select>

        </div>
    </div>


    <div class="layui-form-item" id="plugin" >
    <label class="layui-form-label">插件(选填)</label>
    <div class="layui-input-block">

        <select name="plugin_name" id="plugin_name" lay-filter="plugin_name" >
            <option value="">默认非插件数据</option>
            {if !empty($entity.plugin_name)}
            {volist name="plugin" id="vo" key="k"}
            <option value="{$vo.name}" disabled {eq name="vo.name" value="$entity.plugin_name"} selected=""  {/eq}>{$vo.title}</option>
            {/volist}
            {else/}
            {volist name="plugin" id="vo"  key="k"}
            <option value="{$vo.name}" >{$vo.title}</option>
            {/volist}
            {/if}
        </select>

    </div>
    </div>



    <div style="padding: 20px; ">
        <div class="layui-row layui-col-space15" id="field-data">
            {volist name="fields" id="field"}

            <div class="layui-col-md4 overflow-hidden" id="open_{$field.id}" >
                <div class="layui-card">
                    <div class="layui-inline" data-index="{$field.id}" onclick="editconfig(this)">
                        <div class="layui-card-header">
                            <table class="layui-table" lay-skin="nob">
                                <tr>
                                    <th>类型：{$field.type_name}</th>
                                    <th>名称：{$field.info}</th>
                                    <th>字段：{$field.config_name}</th>
                                </tr>

                            </table>

                        </div>
                        <input type="hidden"  name="fields[]" id="{$field.id}" value='{$field.json}' />
                    </div>
                    <div class="layui-bg-red" onclick="deletenode(this)" data-index="{$field.id}" style="text-align: center"> 删除</div>

                </div>
            </div>

            {/volist}

        </div>
    </div>

    <div class="layui-row">
        <div class="layui-col-md1">
            &nbsp
        </div>
        <div class="layui-col-md10">

            <button type="button" class="layui-btn layui-btn-warm layui-btn-fluid layui-btn-sm" onclick="addconfig()">添加字段</button>
        </div>
        <div class="layui-col-md1">
            &nbsp
        </div>
    </div>
    </div>


</form>

{/block}

{block name="js"}

<script>

    var table;
    var laydate;
    var util;
    var	$;
    var result = "";
    var form;
    var auth_status = '';
    var dtree;
    layui.use(['form', 'table','util','laydate','layer','element'],function() {
        $ = layui.jquery;
        var util = layui.util,layer = layui.layer ,element = layui.element;
        table = layui.table;
        form = layui.form;
        laydate = layui.laydate;
        form.on('radio(scopes)', function (data) {
            showAppName(data.value);
        });

    })

    //选择图标
    // function getNum(){
    //
    //     layer.open({
    //         type: 2,
    //         title: '图标列表',
    //         shade: 0.8,
    //         //closeBtn: 0, //不显示关闭按钮
    //         shade: [0],
    //         shadeClose: true,//单机空白处消失
    //         maxmin: true,
    //         //anim: 4, //动画类型
    //         area: ['40%','90%'],
    //         content:"{:Url('public_common/icon')}",
    //         btn: ['选择图标'],
    //         yes: function(index, layero){
    //
    //             var nodeName = window["layui-layer-iframe" + index];//父页面引用
    //             var icon = nodeName.getIcon();
    //             if(icon!=false){
    //                 $('#icon').val(icon);
    //                 layer.close(index);
    //                 //处理重复提交
    //             }
    //
    //
    //
    //
    //
    //         }
    //     });
    // }


    //新增或修改

    function addconfig(){
        var  title ='新增';
        var url = "{:Url('addconfig')}";
        var   post_url = "{:Url('addconfig')}";

        layer.open({
            type: 2,
            title: title,
            shade: 0.8,
            maxmin: true,
            area: ['90%','90%'],
            content: url,
            btn: ['立即提交'],
            yes: function(index, layero){

                var nodeName = window["layui-layer-iframe" + index];
                var id = nodeName.getId();
                var Data = nodeName.getSaveData();


                isClick = false;

                if(Data!= false){
                    $.ajax({
                        url: post_url,
                        type:"post",
                        data:Data,
                        success: function (data) {
                            if(data.data.errcode == 0){
                                console.log(data.data.data);

                                var html= '<div class="layui-col-md4 overflow-hidden"  id = "open_'+data.data.data.id+'">\n' +
                                    '                    <div class="layui-card" style="border:1px solid red">\n' +
                                    '                        <div class="layui-inline" data-index="'+data.data.data.id+'" onclick="editconfig(this)">\n' +
                                    '                            <div class="layui-card-header">'+
                                    '<table class="layui-table" lay-skin="nob">' +
                                    ' <tr>' +
                                    ' <th ><span class="layui-badge">NEW</span>&nbsp&nbsp类型：'+getName(data.data.data.type)+'</th>' +
                                    ' <th >名称：'+data.data.data.info+'</th>' +
                                    ' <th >字段：'+data.data.data.config_name+'</th>' +
                                    ' </tr>' +

                                    '  </table>' +

                                    '</div>\n' +
                                    '                            <input type="hidden"  name="fields[]" id="'+data.data.data.id+'" value=\''+JSON.stringify(data.data.data)+'\' />\n' +
                                    '                        </div>\n' +
                                    '                        <div class="layui-bg-red" onclick="deletenode(this)"  style="text-align: center" data-index="'+data.data.data.id+'"> 删除</div>\n' +
                                    '\n' +
                                    '                    </div>\n' +
                                    '                </div>';

                                $('#field-data').append(html);

                                layer.close(index);
                                isClick = true;

                            }else if(data.data.errcode != 0){
                                layer.msg(data.msg, {
                                    icon: 5,
                                    time: 500 //1.5秒关闭（如果不配置，默认是3秒）
                                });
                                isClick = true;
                            }else{
                                layer.msg('操作失败！请稍后再试。', {
                                    icon: 5,
                                    time: 500 //1.5秒关闭（如果不配置，默认是3秒）
                                });
                                isClick = true;
                            }
                        }
                    });
                }


            }
        });
    }


    function editconfig(that) {

        //得到json数据并unicode编码
        var data_index = $(that).attr("data-index");
        var data =  $('#'+data_index).val();

        var  title ='更改';
        var url = "{:Url('editconfig')}?data="+encodeURI(data.replace(/#/, "__JING_HAO__"));
        var post_url = "{:Url('editconfig')}";

        layer.open({
            type: 2,
            title: title,
            shade: 0.8,
            maxmin: true,
            area: ['90%','90%'],
            content: url,
            btn: ['立即提交'],
            yes: function(index, layero){

                var nodeName = window["layui-layer-iframe" + index];
                var id = nodeName.getId();
                var Data = nodeName.getSaveData();


                isClick = false;

                if(Data!= false){
                    $.ajax({
                        url: post_url,
                        type:"post",
                        data:Data,
                        success: function (data) {
                            if(data.data.errcode == 0){
                                console.log(data.data.data);

                                var html=  '                    <div class="layui-card" style="border:1px solid #5FB878">\n' +
                                    '                        <div class="layui-inline" data-index="'+data.data.data.id+'" onclick="editconfig(this)">\n' +
                                    '                            <div class="layui-card-header">'+
                                    '<table class="layui-table" lay-skin="nob">' +
                                    ' <tr>' +
                                    ' <th><span class="layui-badge " style="background-color: #5FB878">UPD</span>&nbsp&nbsp类型：'+getName(data.data.data.type)+'</th>' +
                                    ' <th>名称：'+data.data.data.info+'</th>' +
                                    ' <th>字段：'+data.data.data.config_name+'</th>' +
                                    ' </tr>' +

                                    '  </table>' +

                                    '</div>\n' +
                                    '                            <input type="hidden"  name="fields[]" id="'+data.data.data.id+'" value=\''+JSON.stringify(data.data.data)+'\' />\n' +
                                    '                        </div>\n' +
                                    '                        <div class="layui-bg-red" onclick="deletenode(this)"   style="text-align: center" data-index="'+data.data.data.id+'"> 删除</div>\n' +
                                    '\n' +
                                    '                    </div>';


                                $('#open_'+data_index).html(html);

                                layer.close(index);
                                isClick = true;

                            }else if(data.data.errcode != 0){
                                layer.msg(data.msg, {
                                    icon: 5,
                                    time: 500 //1.5秒关闭（如果不配置，默认是3秒）
                                });
                                isClick = true;
                            }else{
                                layer.msg('操作失败！请稍后再试。', {
                                    icon: 5,
                                    time: 500 //1.5秒关闭（如果不配置，默认是3秒）
                                });
                                isClick = true;
                            }
                        }
                    });
                }


            }
        });
    }


    function getId(){
        return $('#id').val();
    }

    function getSaveData(){

        var name = $("input[name='name']").val();//配置分类
        var config_name = $("input[name='config_name']").val();//配置分类英文标识
        var icon = $("input[name='icon']").val();//图标
        var fields = $("input[name='fields[]']").val();//字段
        if(name == ''){
            layer.msg("请填写数据组名称", {
                icon : 2,
                time : 1500
            });
            return false;
        }

        if(config_name == ''){
            layer.msg("请填写数据组字段", {
                icon : 2,
                time : 1500
            });
            return false;
        }
        if(!fields){
            layer.msg("请至少添加一个字段", {
                icon : 2,
                time : 1500
            });
            return false;
        }







        return $('#form').serialize();
    }


    function deletenode(that) {
        layer.confirm('移除字段', function(index) {
            layer.close(index);
            var index = $(that).attr("data-index");
            if(index){
                $("#open_"+index).remove();
            }

        });

    }


    function getName(type) {
        var rs='';
        switch(type) {
            case 'text':
                rs='普通文本框';
                break;
            case 'textarea':
                rs='多行文本域';
                break;
            case 'r_textarea':
                rs='富文本域';
                break;
            case 'radio':
                rs='单选框';
                break;
            case 'checkbox':
                rs='复选框';
                break;
            case 'select':
                rs='下拉框';
                break;
            case 'upload':
                rs='文件上传';
                break;
        }
        return rs;
    }
    /**
     * 显示隐藏应用选择
     */
    function showAppName(value) {
        //显示应用选择
        if(value =='member'){
            $("#miniapp").show();
        }else{
            //隐藏应用选择
            $("#miniapp").hide();
            //清空select 值
            $("#miniapp_name").val('');
            form.render('select');
        }

    }
</script>
{/block}